<template>
  <div class="faility">
    <div class="app-title">设备管理</div>
    <div class="filter">
      <el-form :model="form" inline>
        <el-form-item label="设备名称">
          <el-input v-model="form.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="设备状态">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="启用" :value="0"></el-option>
            <el-option label="禁用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button type="info" @click="handleRest">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button>导出</el-button>
    </div>
    <div class="hanlder">
      <div class="add">
        <el-button type="primary" @click="handleOpen">新增物联网管理设备</el-button>
        <!-- <el-button type="primary" plain> 批量导入设备</el-button> -->
      </div>
      <!-- <el-button type="primary" @click="handleOpenCabine">机柜管理</el-button> -->
    </div>
    <el-table :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" type="index" width="100"></el-table-column>
      <el-table-column label="设备管理" prop="hostName" width="346"></el-table-column>
      <el-table-column label="设备状态" prop="status">
        <template #default="scope">
          <el-tag :type="scope.row.status === 0 ? 'success' : 'danger'">
            {{ scope.row.status === 0 ? "正常" : "暂停" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备ip" prop="ip">
        <template #default="{ row }">
          <div class="ip-display">
            <span v-if="showIp[row.hostId] || showAllIp">{{ row.ip }}</span>
            <span v-else>***.***.***.***</span>
            <el-icon class="eye-icon" @click="toggleIpVisibility(row.hostId)">
              <View v-if="showIp[row.hostId] || showAllIp" />
              <Hide v-else />
            </el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="设备host" prop="hostId"></el-table-column>
      <!-- <el-table-column label="设备更新时间" prop="time"></el-table-column> -->
      <el-table-column label="操作" width="320">
        <template #default="{ row }">
          <el-button type="primary" text @click="handleEdit(row)">编辑设备</el-button>
          <el-button type="primary" v-if="row.status === 1" text @click='handleUpdateStatus(row)'>恢复监控</el-button>
          <el-button type="danger" v-else text @click='handleUpdateStatus(row)'>暂停监控</el-button>
          <el-button type="danger" @click='handleDelete(row.hostId)' text>删除监控</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <div class="allHanlde">
        <el-button @click='handleUpdateStatusAll(1)'>暂停监控</el-button>
        <el-button type="primary" @click='handleUpdateStatusAll(0)'>恢复监控</el-button>
        <el-button type="danger" @click='handleDeleteAll()'>删除监控</el-button>
      </div>
      <el-pagination background layout="total,sizes,prev, pager, next,jumper" :total="pages.total"
        v-model:current-page="pages.page" v-model:page-size="pages.pageSize" @size-change="handleSizeChange"
        @current-change="handleSizeChange" />
    </div>
  </div>
  <AddDialog ref="addDialogRef" @success="getList"></AddDialog>
  <AddCabinetDialog ref="addCabinetDialogRef"></AddCabinetDialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import AddDialog from "./components/AddDialog.vue";
import AddCabinetDialog from "./components/AddCabinetDialog.vue";
import { getDevice, getDeviceDetail, deleteDevice, updateDeviceStatus, updateDeviceStatusBatch } from "@/api/facility";
import { ElMessage, ElMessageBox } from 'element-plus';
import { View, Hide } from '@element-plus/icons-vue'
const showIp = ref({});
const showAllIp = ref(false);

const toggleIpVisibility = (hostId) => {
  if (hostId) {
    showIp.value[hostId] = !showIp.value[hostId];
  } else {
    showAllIp.value = !showAllIp.value;
  }
};

const addDialogRef = ref();
const addCabinetDialogRef = ref();
const pages = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
})
const form = ref({
  name: "",
  status: "",
});

const checkedList = ref([])
const list = ref([]);
const listAll = ref([])
//选中设备
const handleSelectionChange = (val) => {
  checkedList.value = val
}
//获取设备列表
const getList = async () => {
  const res = await getDevice(form.value);
  list.value = res.data.slice(0, 10)
  listAll.value = res.data
  pages.total = res.data.length
}
getList()

//分页
const handleSizeChange = () => {
  if (pages.page == 0) {
    list.value = listAll.value.slice(0, pages.pageSize)
  } else {
    list.value = listAll.value.slice((pages.page - 1) * pages.pageSize, pages.page * pages.pageSize)
  }
};

//重置
const handleRest = () => {
  form.value = {
    name: "",
    status: "",
  };
  getList()
}

//编辑弹窗
const handleEdit = async (row) => {
  const res = await getDeviceDetail({ hostId: row.hostId })
  res.data.hostId = row.hostId
  addDialogRef.value.handleOpen(res.data);
}

//删除
const handleDelete = (hostId) => {

  //确认弹窗
  ElMessageBox.confirm('确认删除该设备, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'

  }).then(async () => {
    const res = await deleteDevice([hostId])
    ElMessage.success('删除成功')
    getList()
  })
}

//批量删除
const handleDeleteAll = () => {
  if (checkedList.value.length == 0) {
    ElMessage.error("请选择要删除的设备")
    return
  }
  ElMessageBox.confirm('确认删除该设备, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const hostIds = checkedList.value.map(x => x.hostId)
    const res = await deleteDevice(hostIds)
    ElMessage.success('删除成功')
    getList()
  })
}
//修改设备状态
const handleUpdateStatus = async (row) => {
  const res = await updateDeviceStatus({ hostId: row.hostId, status: row.status == 1 ? 0 : 1 })
  ElMessage.success('修改成功')
  getList()
}
//批量修改
const handleUpdateStatusAll = async (status) => {
  if (checkedList.value.length == 0) {
    ElMessage.error("请选择要修改的设备")
    return
  }
  //确认弹窗
  ElMessageBox.confirm('确认修改选中列表设备状态, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const hosts = checkedList.value.map(x => ({ hostid: x.hostId }))
    const res = await updateDeviceStatusBatch({ hosts, status })
    ElMessage.success('修改成功')
    getList()
  })
}


//开启设备弹窗
const handleOpen = () => {
  addDialogRef.value.handleOpen();
};
//关闭设备弹窗
const handleOpenCabine = () => {
  addCabinetDialogRef.value.handleOpen();
};
</script>
<style lang="scss" scoped>
.ip-display {
  display: flex;
  align-items: center;
  gap: 8px;

  .eye-icon {
    cursor: pointer;
    color: #409eff;
    font-size: 16px;

    &:hover {
      color: #66b1ff;
    }
  }
}

.faility {
  display: flex;
  flex-direction: column;
  padding: 16px;
  height: calc(100vh - 100px);
  box-sizing: border-box;

  .el-table {
    flex: 1;
  }

  .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;

    .el-form {
      .el-form-item {
        margin-bottom: 0;
      }

      .el-select,
      .el-input {
        width: 200px;
      }
    }
  }

  .hanlder {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    margin-top: 32px;
  }

  .pagination {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
  }
}
</style>